<script setup>

</script>

<template>
<template>
  <div class="home">
    <h1>{{ message }}</h1>
    <p>当前总人口数：{{ totalPopulation.toLocaleString() }} 人</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: '加载中...',
      totalPopulation: 0
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      const response = await fetch('http://localhost:8080/api/index/welcome');
      const data = await response.json();
      this.message = data.message;
      this.totalPopulation = data.totalPopulation;
    }
  }
};
</script>

<style scoped>
.home {
  text-align: center;
  margin-top: 50px;
}
</style>

</template>

<style scoped>

</style>
